<!--
 * @Descripttion: 右键简单组件演示文件
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年7月22日16:31:14
 * @LastEditors:
 * @LastEditTime:
-->

<template>
  <el-main>
    <el-row>
      <el-col :lg="24">
        <el-card shadow="never">
          <div
            style="
              height: 500px;
              width: 1200px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: top;
              color: #999;
            "
          >
            <el-form :model="form" label-width="180px" inline="false">
              <el-row>
                <el-form-item label="呼叫模式" prop="QueueCount">
                  <el-radio-group v-model="form.QueueCount">
                    <el-radio label="1">叫号一次</el-radio>
                    <el-radio label="2">叫号二次</el-radio>
                    <el-radio label="3">叫号三次</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="叫号类型标识呼叫次数" prop="QueueKeyCount">
                  <el-radio-group v-model="form.QueueKeyCount">
                    <el-radio label="1">一次</el-radio>
                    <el-radio label="2">二次</el-radio>
                    <el-radio label="3">三次</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="测试叫号语音" prop="QueueHead">
                  <el-radio-group v-model="form.QueueHead">
                    <el-radio label="A">A</el-radio>
                    <el-radio label="B">B</el-radio>
                    <el-radio label="C">C</el-radio>
                    <el-radio label="D">D</el-radio>
                    <el-radio label="E">E</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="座位号" prop="QueueNumber">
                  <el-input-number
                    style="width: 120px"
                    v-model="form.QueueNumber1"
                    clearable
                  ></el-input-number>
                  <el-input-number
                    style="width: 120px"
                    v-model="form.QueueNumber2"
                    clearable
                  ></el-input-number>
                </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="提示语" prop="QueueTop">
                <el-select  placeholder="请选择" v-model="form.QueueTop">
                  <el-option label="梦田欢迎你" value="Start"></el-option>
                </el-select>
                
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="结束语" prop="QueueEnd">
                <el-select  placeholder="请选择" v-model="form.QueueEnd">
                  <el-option label="请你就餐" value="End"></el-option>
                </el-select>
               
              </el-form-item>
            </el-row>
              <el-form-item label="呼叫语音" prop="QueueStr">
                <el-input
                  type="textarea"
                  style="width: 500px"
                  :rows="3"
                  v-model="form.QueueStr"
                  clearable
                ></el-input>
              </el-form-item>
              <el-row type="flex" justify="center" align="middle">
                <el-button @click="processSound">呼叫</el-button>
              </el-row>
              <div id="audioBox" />
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: "contextmenu",
  components: {},
  data() {
    return {
      form: {
        QueueCount: "2",
        QueueKeyCount: "2",
        QueueHead: "B",
        QueueTop: "梦田欢迎你",
        QueueEnd: "请你就餐",
        QueueStr: "",
        QueueNumber1:"2",
        QueueNumber2:"4",
      },
      QueueArray: [],

    };
  },
  mounted() {},
  methods: {
    processSound() {
      // eslint-disable-next-line no-debugger
      debugger;
      this.QueueArray.length = 0;
      // this.QueueArray.push("http://localhost:9898/QueueCall/Default/End.MP3");
      // this.QueueArray.push("http://localhost:9898/QueueCall/Default/2.MP3");
      // this.QueueArray.push("http://localhost:9898/QueueCall/Default/4.MP3");
      // this.QueueArray.push("http://localhost:9898/QueueCall/Default/B.MP3");
      // this.QueueArray.push("http://localhost:9898/QueueCall/Default/Top.MP3");
      let content = "";
      for (let i = 0; i < parseInt(this.form.QueueCount); i++) {
        this.QueueArray.push("http://localhost:9898/QueueCall/Default/梦田欢迎你.MP3");
        content += this.form.QueueTop;
        for (let j = 0; j < parseInt(this.form.QueueKeyCount); j++) {


          this.QueueArray.push("http://localhost:9898/QueueCall/Default/"+this.form.QueueHead+".MP3");
          this.QueueArray.push("http://localhost:9898/QueueCall/Default/"+this.form.QueueNumber1+".MP3");
          this.QueueArray.push("http://localhost:9898/QueueCall/Default/"+this.form.QueueNumber2+".MP3");
          content += this.form.QueueHead;
          content += this.form.QueueNumber1;
          content += this.form.QueueNumber2;
        }
        this.QueueArray.push("http://localhost:9898/QueueCall/Default/请你就餐.MP3");
        content += this.form.QueueEnd;
      }
      this.QueueArray.reverse();
      this.form.QueueStr = content;
      this.paySound();
    },
    paySound() {
      // eslint-disable-next-line no-debugger
      debugger;
      var myAudio = new Audio();
      myAudio.preload = true;
      myAudio.controls = false;
      let source = this.QueueArray.pop();
      myAudio.src = source; //每次读数组最后一个元素
      //myAudio.src = "http://localhost:9898/QueueCall/Default/Top.MP3";
      myAudio.addEventListener("ended", playEndedHandler, false);
      myAudio.play();
      document.getElementById("audioBox").appendChild(myAudio);
      myAudio.loop = false; //禁止循环，否则无法触发ended事件
      let that = this;
      function playEndedHandler() {
        // eslint-disable-next-line no-debugger
        debugger;
        source = that.QueueArray.pop();
        myAudio.src = source; //this.QueueArray.pop();
        myAudio.play();
        console.log(that.QueueArray.length);
        !that.QueueArray.length &&
          myAudio.removeEventListener("ended", playEndedHandler, false); //只有一个元素时解除绑定
      }
    },
  },
};
</script>

<style scoped>
</style>
